// 遮罩层 开 
function cov() {
    $('.cover').css('display', 'block')
    // console.log(k);
}
// 关
$(document).on('click', '.cha', function () {
    $('.cover').css('display', 'none')
})

// // 渲染遮罩层
function xrcover1() {
    $('.buy').remove()
    let div = `<div class="buy">
            <div class="buy1">
                <div>购买数字专辑</div>
                <div class="cha" title="关闭"><span>×</span></div>
            </div>
            <div class="buy2">
                <div class="buy2_top">QQ昵称：篮球王子</div>
                <div class="buy2_bot">
                    <div class="buy2_top_l">
                        <div class="buy_img"></div>
                        <div class="buy_name"></div>
                        <div class="buy_money"></div>
                    </div>
                </div>
            </div>
            <div class="buy3">
                <!-- 支付方式 -->
                <ul>
                    <li>支付方式：</li>
                    <li class="buy3_pay">
                        <div class="sc cs">Q币支付
                            <div class="b1 b2"></div>
                            <!-- <nav class='sc1'style="background-image: url(./images/sprite.5e2f61e2dedbc68b8b5c81275ba25d71.png);background-position: -113px -129px;width: 25px;height: 25px;">
                            </nav> -->
                        </div>
                        <div class="cs"><div class="b2"></div>微信支付<span>97折</span></div>
                        <div class="cs"><div class="b2"></div>QQ钱包<span>97折</span></div>
                        <nav class="mores" style="position: relative;">更多方式
                            <i class="i"></i>
                            <div class="more">
                                <div class="more_QQCard">
                                    <i class="i ia "></i> QQ卡
                                </div>
                                <div class="more_pay">
                                    <i class="i ia "></i> 网银支付
                                </div>
                            </div>
                        </nav>
                    </li>
                </ul>
                <!-- 确认支付？ -->
                <div class="pay">
                    <!-- Q币支付 -->
                    <div class="pay1 open">
                        <p style="font-size: 14px;color: #313131;margin-top: 10px;">
                            <i class="i"
                                style="background-position: -164px -178px; width: 14px;height: 14px; margin-right: 2px;margin-left: 0px;vertical-align: -2px;"></i>
                            Q币余额不足
                            <span style="color: #969696;font-size: 12px;">余额：1.2Q币</span>
                        </p>
                        <div class="b3"></div>
                        <p class="pay1_chong">去充值</p>
                    </div>
                    <!-- 微信支付 -->
                    <div class="pay2">
                        <div class="qrCode">
                            <img src="./images/收款码.jpg" alt="">
                        </div>
                    </div>
                    <!-- 手Q扫码支付 -->
                    <div class="pay3">
                        <div class="qrCode">
                            <img src="./images/qq收款码.jpg" alt="">
                        </div>
                    </div>
                    <div class="other">
                        <!-- 更多支付方式 -->
                        <div class="pay4">
                            <!-- QQ卡 -->
                            <ul>
                                <li><input type="text" placeholder="请输入QQ卡号"></li>
                                <li><input type="password" placeholder="请输入QQ卡密码"></li>
                                <li class="pay4_ok">确认支付</li>
                                <li class="pay4_tow">
                                    <i class="i"
                                        style="background-position: -113px -178px;width: 13px;height: 13px;margin-right: 3px;margin-top: 3px;vertical-align: -2px;"></i>
                                    <span>QQ卡可分多次使用</span>
                                </li>
                            </ul>
                        </div>
                        <!-- 网银支付 -->
                        <div class="pay5">
                            <ul>
                                <li style="margin-top: 10px; margin-bottom: 5px;">
                                    银行类型：<i class="i"
                                        style="background-position: -131px -155px;width: 17px;height: 17px;vertical-align: -2px;"></i><span
                                        style="font-size: 13px;">个人银行</span>
                                </li>
                                <li class="pay5_bank">
                                    <div class="bank bdcolor">
                                        <i class="i ia jl"></i>
                                        <i class="ib"></i>
                                        <span>招商银行</span>
                                    </div>
                                </li>
                                <li class="pay5_bank_card" style="height: 20px;margin-top: 10px;">
                                    <span>选择卡种:</span>
                                    <i class="i iq ic"></i>
                                    <span>储蓄卡</span>
                                    <i class="i iq"></i>
                                    <span>信用卡</span>
                                </li>
                                <li class="pay5_bank_pay">
                                    去支付5.20元
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>
        </div>`
    $('.cover').append(div)
}

function xrcover2(v) {
    // 渲染之前先清空
    $('.buy_money').html('')
    $('.prem').remove()

    // 专辑名称
    let div = `<span class='prem'>${v.singer_name}《${v.album_name}》</span>`
    $('.buy_name').append(div)
    // 专辑照片
    let img = `<img class='prem' src="https://y.qq.com/music/photo_new/T002R300x300M000${v.album_mid}.jpg?max_age=2592000" alt="">`
    $('.buy_img').append(img)
    // 单价
    let price = `${v.price * 0.01} <span style="font-size: 12px;color: #969696;">元</span>`
    $('.buy_money').append(price)
    // 微信扫码单价
    let wechat = `<p class='prem'>
                                    <i class="i" style="background-position: -142px -129px;width: 16px;height: 14px;"></i>
                                    微信扫码，支付
                                    <span style="font-size: 20px;">${Math.floor(v.price * 0.01 * 0.97 * 100) / 100} </span>元
                                </p>`
    $('.pay2 .qrCode').before(wechat)
    // QQ扫码单价
    let qq = `<p class='prem'><i class="i" style="background-position: -69px -81px;width: 14px;height: 17px;"></i>
                            手Q扫码，支付
                            <span style="font-size: 20px;">${Math.floor(v.price * 0.01 * 0.97 * 100) / 100} </span>元</p>`
    $('.pay3 .qrCode').before(qq)

    // Q币余额
    let qb = `<p class='prem' style="color: #969696;margin-top: 5px;">
                还需<span style="color: black;">${v.price * 0.01 - 1.2}</span>Q币，请先去充值，或选择其他支付方式
             </p>`
    $('.b3').append(qb)



    $(".buy3_pay>div").removeClass("sc")
    $(".buy3_pay>div").eq(0).addClass("sc")

    // 清除支付方式的open
    $('.pay>div').removeClass('open')
    $('.pay>div').eq(0).addClass('open');

    // // 清除勾选的精灵图
    $('.b2').removeClass('b1')
    // // 添加勾选精灵图
    $('.b2').eq(0).addClass('b1')

    $('.other>div').removeClass('morehid')
    $('.mores').removeClass('sc')
}



// 点击切换支付方式
$(document).on('click', ".buy3_pay>div", function () {
    xrqrcode()
    // 先清除所有的sc类
    $('.mores').removeClass('sc')
    $(".buy3_pay>div").removeClass("sc")
    // 再给点击的下标添加sc类
    $($(this)).addClass('sc')
    // // 清除勾选的精灵图
    $('.b2').removeClass('b1')
    // // 添加勾选精灵图
    $('.b2').eq($(this).index()).addClass('b1')
    // var div = `<nav class='sc1' style="background-image: url(./images/sprite.5e2f61e2dedbc68b8b5c81275ba25d71.png);background-position: -113px -129px;width: 25px;height: 25px;"></nav>`
    // $($(this)).append(div)
    // 清除支付方式的open
    $('.pay>div').removeClass('open')
    $('.pay>div').eq($(this).index()).addClass('open');

    // 更多支付方式
    $('.other>div').removeClass('morehid')

})


// 渲染银行
function xrbank(data) {

    data.forEach((v, k) => {
        var div = `<div class="bank">
                        <i class="i ia"></i>
                        <i class="ib" style='background-position: -${(k+1) * 18 }px 0px;'></i>
                        <span>${v.name}</span>
                    </div>`
        $('.pay5_bank').append(div)

    });

}
// 银行鼠标点击事件
$(document).on('click', '.bank', function () {
    // 边框跟随鼠标
    $('.bank').removeClass('bdcolor')
    $(this).addClass('bdcolor')
    // 圆点跟随鼠标
    $('.bank>.i').removeClass('jl')
    $(this).children(0).addClass('jl')

})

$(document).on('click','.iq',function () {
    $('.iq').removeClass('ic')
    $(this).addClass('ic')
})


// 更多方式点击事件
$(document).on('click','.more>div',function () {
    // console.log(666);
    $('.b2').removeClass('b1')
    $('.other>div').removeClass('morehid')
    $('.other>div').eq($(this).index()).addClass('morehid');

    $(".buy3_pay>div").removeClass("sc")
    $('.sc1').remove()

    
    $('.mores').addClass('sc')

    $('.more>div>.ia').removeClass('jl')
    $('.more>div>.ia').eq($(this).index()).addClass('jl')

})

$('.contents-1F>div>p>span').attr('onclick', 'cov()');


// 二维码遮罩层
function xrqrcode() {
    $('.qrCode').each((k, v) => {
        var div = `<div class="qrcover">
                        <img src="./images/loading44.gif" alt="">
                    </div>`
        $('.qrCode').append(div)
    })
    setTimeout(() => {
        $('.qrcover').remove()
    }, 500);
}
